<template>
  <div class="foryou">
      <div class="title">
        <p>{{$attrs.title}}</p>
      </div>
        <ul>
          <li @click="$router.push({name:'dailySongs'})">
              <img src="./109951165950772286.jpg" alt="">
              <p>每日推荐</p>
              <button :style="{'width':'50px','height':'50px','transform':`scale(${num})`}" class="play-btn" @click.stop="toggle">
                <svg-icon icon-class="play" style="position: absolute;margin-left: 4px;cursor: default;"></svg-icon>
              </button>
          </li>
          <li>
            <img src="./109951163891857559.jpg" alt="">
            <div class="right-part">
              <span>
                <p class="title">ORIGINAL RESONANCE</p>
                <p>鈴村健一,宮野真守</p>
              </span>
              <span>
              </span>
            </div>
          </li>
        </ul>
  </div>
</template>
<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import store from 'storejs';
import { message } from 'ant-design-vue';

export default{
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    toggle() {
      this.num = 0.9;
      setTimeout(() => {
        this.num = 1;
      }, 100);
      // eslint-disable-next-line no-console
      if (store.get('user')) {
        // 播放歌曲
      } else {
        message.warning('此操作需要登录网易云账号');
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.foryou{
   margin-top: 54px;
  >ul{
     display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
    margin-bottom: 78px;
    li{
      flex:1;
      border-radius: 1rem;
      height: 198px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    >li:nth-of-type(2){
      padding: 1rem;
      background: var(--color-secondary-bg);
      border-radius: 1rem;
      display: flex;
      img{
        height: 164px;
        border-radius: .75rem;
        margin-right: 1.2rem;
        border: 1px solid #f3f3f3;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
      }
    }
    >li:nth-of-type(1){
      position:relative;
      p{
        position: absolute;
        top: 14px;
        left: 25px;
        font-weight: 600;
        font-size: 64px;
        line-height: 80px;
        width: 148px;
        height: 148px;
        color: #fff;
        user-select: none;
        cursor: pointer;
      }
    }
  }
}
.right-part{
  display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--color-text);
    width: 100%;
    span{
      display: inline-block;
      width: inherit;
      &:nth-of-type(1){
        p{
           &:nth-of-type(1){
            margin-bottom: .6rem;
          }
        }
      }
    }
}
.title{
  margin-bottom: 20px;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    font-size: 1.6rem;
    font-weight: 600;
}
.AudioListspace{
  >ul{
    grid-template-columns: repeat(2, 1fr);
  }
}
ul{
  >li:nth-of-type(1){
    img{
      position: absolute;
      top: o;
      left: o;
      width: 100%;
      -webkit-animation:movetranX 38s infinite;
      animation:movetranx 38s infinite;
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
      z-index: -1;
    }
  }
}

@keyframes movetranx{
  0% {
      transform: translateY(o);
    }
100%{
      transform: translateY( -50%);
    }
  }
  .play-btn{
    position: absolute;
    bottom: 12%;
    right: 4%;
    color: #fff;
    background: hsla(0,0%,100%,.14);
    border: 1px solid hsla(0,0%,100%,.08);
    border-radius: 50%;
    cursor: default;
    transition: .2s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.play-btn:hover {
  background:rgba(225,225,225,.5);
}
</style>
